<template>
  <el-dialog
    top="30px"
    :title="title"
    width="80%"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-form @submit.native.prevent :inline="true">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          clearable
          class="form-control-ml"
          placeholder="客户名称"
          @keyup.enter.native="getAllData()"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="params['reply_funds.gte']"
          placeholder="担保金额大于(含)"
          v-input-number="{ min: 0 }"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params['reply_funds.gt']"
          placeholder="担保金额大于(不含)"
          v-input-number="{ min: 0 }"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="区域查询"
          :topValue="'52'.padEnd(12, 0)"
          :bottomLevel="2"
          clearable
          @change="getAllData()"
        ></select-address>
      </el-form-item> -->

      <el-form-item>
        <el-input
          v-model="params['months.gt']"
          placeholder="担保期限大于(不含)"
          v-input-number="{ min: 0 }"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params['months.lte']"
          placeholder="担保期限小于(含)"
          v-input-number="{ min: 0 }"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button class="btn-long" @click="getAllData()" icon="el-icon-refresh" :loading="loading">
          查询
        </el-button>
      </el-form-item>

      <el-form-item class="float-right">
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel('项目受理')"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>

    <div class="card my-2">
      <div class="card-body" v-loading="countLoading">
        <span class="h5 text-muted">
          项目共计：
          <span class="text-danger">{{ totalCount }}</span>
        </span>
        <span class="h5 text-muted ml-5">
          代偿金额合计：
          <span class="text-danger">{{ tableFunds || '-' }}</span>
          元
        </span>
      </div>
    </div>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:name="scope">
        <el-popover placement="top-start" title="项目经理" trigger="hover">
          <div>
            <div>{{ `A角： ${scope.row.res_a_name || '-'}；` }}</div>
            <div class="mb-2">{{ `电话： ${scope.row.res_a_phone || '-'}` }}</div>
            <div>{{ `B角： ${scope.row.res_b_name || '-'}；` }}</div>
            <div>{{ `电话： ${scope.row.res_b_phone || '-'}` }}</div>
          </div>
          <div slot="reference">
            <div class="status-label badge-info text-left w-100">
              <div>A角:{{ scope.row.res_a_name }}</div>
              <div>B角:{{ scope.row.res_b_name }}</div>
            </div>
          </div>
        </el-popover>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
// import SelectAddress from '@/components/select/SelectAddress'
import { exportTable } from '@/bank/plugins/export'
export default {
  components: {
    // SelectAddress,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    visible: Boolean,
    otherParams: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      countLoading: false,
      loading: false,
      tableData: [],
      tableName: 'compens_view_28',
      totalCount: 0,
      tableColumns: [
        {
          attrs: { label: '借款客户', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '联系人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '代偿金额', prop: 'amount', align: 'center' } },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '联系电话', prop: 'corp_phone', align: 'center' } },

        { attrs: { label: '放款金额(万元)', prop: 'warranty_amount', align: 'center' } },
        { attrs: { label: '放款时间', prop: 'load_date', align: 'center' } },
        { attrs: { label: '到期时间', prop: 'load_end_date', align: 'center' } },
        {
          attrs: { label: '合作银行', prop: 'bank_name', align: 'center' },
          process: v => v || '-',
        },
        {
          attrs: { label: '担保机构', prop: 'service_name', align: 'center' },
          process: v => v || '-',
        },
        {
          attrs: { label: '联保机构', prop: '', align: 'center' },
          process: v => v || '-',
        },
        // { attrs: { label: '项目经理', prop: 'resName', width: 100 }, slot: 'name' },
      ],
      params: {
        index: 1,
        size: 10,
      },
      exportLoading: false,
      tableFunds: '',
    }
  },
  computed: {},
  watch: {
    otherParams: {
      handler: function () {
        this.params['orWhere.service_id.eq'] = ''
        this.params['orWhere.service_id.is'] = ''
        this.params = {
          ...this.params,
          ...this.otherParams,
        }
        if (!this.otherParams['service_id.eq']) {
          this.params['orWhere.service_id.eq'] = `''`
          this.params['orWhere.service_id.is'] = 'null'
        }
        this.getAllData()
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    dataAdapter(item) {
      item.load_date = this.$utils.dateFormat(item.load_date, 'yyyy-MM-dd')
      item.load_end_date = this.$utils.dateFormat(item.load_end_date, 'yyyy-MM-dd')
      return item
    },
    exportExcel(name) {
      this.exportLoading = true
      const { index, size, ...params } = this.params
      const fields = this.tableColumns.map(item => item.attrs?.prop)
      exportTable({
        columns: this.tableColumns,
        table: this.tableName,
        params: { ...params, fields },
        order: {},
        adapter: this.dataAdapter,
        filename: name,
      }).finally(() => {
        this.exportLoading = false
      })
    },
    getAllData() {
      this.getData()
      this.getCountData()
    },
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { reach_time: 'desc' })
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = (data?.data ?? []).map(this.dataAdapter)
          this.totalCount = data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    getCountData() {
      this.countLoading = true
      this.$api
        .getData('credit', this.tableName, {
          ...this.params,
          index: '',
          size: '',
          groupFunc: 'round(sum(amount)|2)',
        })
        .then(res => {
          const data = res?.data?.[0] ?? {}
          this.tableFunds = data.p || 0
        })
        .finally(() => {
          this.countLoading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
